<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>肽含量计算器({:config('peptide_component_version')})</title>
		<link charset="utf-8" rel="stylesheet" href="__PUBLIC__/static/asset/bootstrap/3.3.6/css/bootstrap.min.css">
		
        <style>
        	.no-padding-right{
        		padding-right : 0!important;
        	}
        	.no-padding-left{
        		padding-left: 0!important;
        	}
            .jumbotron{
            	padding-top: 15px !important;
            	padding-bottom: 15px !important;
            }
        </style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="jumbotron">
					<h4><a href="{:config('base')}/index.php"><i class="glyphicon glyphicon-home"></i></a> 肽含量计算器</h4>
					<form id="form-data" action="{:url('result_advance')}" method="post" class="form-horizontal" onsubmit="return false;">
					<div class="form-group">
						<label class="col-md-10 col-sm-10 col-xs-10 control-label">
							序列（可输入氨基酸单字母或多字母，单字母为大写字母）<a href="#" data-toggle="modal" data-target="#help-modal" target="_blank"><i class="glyphicon glyphicon-question-sign"></i></a>
						</label>
					</div>
					
					<div class="form-group">
						<div class="col-md-10 col-sm-10 col-xs-10 no-padding-left no-padding-right">
							<input type="text" name="amino" value="{$amino|default=''}" class="form-control" id="amino">
						</div>
						<div class="col-md-1  col-sm-2 col-xs-12">
							<button id="calculate-button" type="button" class="btn btn-primary pull-right"> 计算平均分子量 </button>
						</div>
					</div>
					
					<div class="form-group">
                    	<div class="col-md-2 col-sm-2 col-xs-3">
							
						</div>
						<div class="col-md-6 col-sm-6 col-xs-6">
							<label class="col-md-2 control-label no-padding-left no-padding-right">二硫键修饰&nbsp;</label>
							<div class="col-md-4 no-padding-left">
								<input class="form-control" type="text" id="s2" name="s2" placeholder="格式：3-8,5-16">
							</div>
							
							<label class="col-md-2 control-label no-padding-right">成环类型&nbsp;</label>
							<div class="col-md-4 no-padding-left">
								<select id="cyclo-type" name="cyclo-type" class="form-control">
									<option value="-1">未成环</option>
									<option value="0">主链成环</option>
									<option value="1">侧链成环</option>
									<option value="2">主（N端）侧（C端）成环</option>
									<option value="3">侧（N端）主（C端）成环</option>
									<option value="4">硫醚成环</option>
								</select>
								<div id="cyclo-type-info" style="display: none;">
									chainA:
									<select id="cyclo-type-A" name="cyclo-type-A" class="form-control">
										<option value="-1">未成环</option>
										<option value="0">主链成环</option>
										<option value="1">侧链成环</option>
										<option value="2">主（N端）侧（C端）成环</option>
										<option value="3">侧（N端）主（C端）成环</option>
										<option value="4">硫醚成环</option>
									</select>
									
									chainB:
									<select id="cyclo-type-B" name="cyclo-type-B" class="form-control">
										<option value="-1">未成环</option>
										<option value="0">主链成环</option>
										<option value="1">侧链成环</option>
										<option value="2">主（N端）侧（C端）成环</option>
										<option value="3">侧（N端）主（C端）成环</option>
										<option value="4">硫醚成环</option>
									</select>
								</div>
							</div>
							
						</div>
						<label class="col-md-2 col-sm-2 col-xs-3">
							
						</label>
                   </div>
				</form>
				<hr>
				
				<form id="form-component" method="post" action="{:url('result_peptide_component')}" class="form-horizontal">
					<div class="form-group">
						<div class="col-md-12 col-sm-12 col-xs-12">
							<label class="col-md-1 control-label no-padding-left no-padding-right">平均分子量&nbsp;</label>
							<div class="col-md-2 no-padding-left">
								<input class="form-control" type="text" id="mw" name="mw" placeholder="输入平均分子量">
							</div>
							
							<label class="col-md-1 control-label no-padding-right">酸性基团&nbsp;</label>
							<div class="col-md-1 no-padding-left">
								<input type="text" size="5" id="acid-count" name="acid-count" value="0" class="form-control">
							</div>
							
							<label class="col-md-1 control-label no-padding-right">碱性基团&nbsp;</label>
							<div class="col-md-1 no-padding-left">
								<input type="text" size="5" id="base-count" name="base-count" value="0" class="form-control">
							</div>
							
							<label class="col-md-1 control-label no-padding-right">盐类型&nbsp;</label>
							<div class="col-md-2 no-padding-left">
								<select id="slat-type" name="salt-type" class="form-control">
									<option value="0">请选择盐类型</option>
									{foreach name="salts" item="salt"}
									<option value="{$salt.id}">{$salt.name}({$salt.english_name})</option>
									{/foreach}
								</select>
							</div>
							
							<label class="col-md-1 control-label no-padding-right">多肽纯度&nbsp;</label>
							<div class="col-md-1 no-padding-left">
								<div class="input-group">
									<input type="text" id="amino-purity" name="amino-purity" class="form-control">
									<span class="input-group-addon">%</span>
								</div>
								
							</div>
						</div>
                    </div>
                    <div class="form-group">
                    	<div class="col-md-offset-10  col-sm-2 col-xs-12">
							<button id="calculate-component-button" type="button" class="btn btn-primary pull-right"> 计算肽含量 </button>
						</div>
                    </div>
				</form>
				<div style="color: #CCCCCC;">无法识别的序列，可直接输入分子量、酸碱基团个数、纯度后直接计算</div>
				<div id="message-show" class="alert alert-danger hidden" role="alert">警告内容</div>
				</div>
				<!--
                	/.col-md-12
                -->
			</div>
			<!-- /.row -->
			
			<div class="row">
				<div id="result-show" class="col-md-12 hidden">
					<div class="title"><h3>计算结果</h3></div>
					<div class="body" id="result-body"></div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="help-modal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">肽含量计算器软件说明</h4>
					</div>
					<div class="modal-body">
						<div>
							<b>方法一：</b>根据序列进行计算<br>
							客户输入序列，和盐类型（可勾选：三氟乙酸盐（TFA)、醋酸盐(HAc）、盐酸盐（HCl）、醋酸铵盐（AA）、钠盐（Na））及多肽纯度，软件自动计算：“理论肽含量y”（包含杂质肽）和“目标肽含量z”<br>

							<b>计算过程：</b>根据序列确认平均分子量、酸性基团个数、碱性基团个数。酸性碱性基团个数根据“酸个数（算含量、溶解性）”和“碱个数（算含量、溶解性）”的数据进行计算，包含C-term和N-term。再根据不同盐类型采用不同的公式进行计算。其中盐类型只能选择一种。<br>
							<br>
							<b>方法二：</b>不能识别的序列，客户直接输入平均分子量、酸性基团和碱性基团个数、多肽纯度。并选择盐类型。软件根据不同盐类型采用不同的公式进行计算。

							其中盐类型只能选择一种。

						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<script type="text/html" id="result_template">
			<div class="col-md-12">
			<ul class="list-unstyled">
				<li class="col-md-4 col-sm-6"><b>平均分子量(MW)：</b>{{d.mw}}g/mol</li>
				<li class="col-md-4 col-sm-6"><b>酸基团个数：</b>{{d.acidCount}}</li>
				<li class="col-md-4 col-sm-6"><b>碱基团个数：</b>{{d.baseCount}}</li>
				<li class="col-md-4 col-sm-6"><b>理论肽含量：</b>{{d.y}}</li>
				<li class="col-md-8 col-sm-12">
					<b>目标肽含量：</b>{{d.lastPurity}} 
				</li>
			</ul>
			</div>
		</script>

			
		<script src="__PUBLIC__/static/sea.js"></script>
		<script src="__PUBLIC__/static/skin/default/config.js"></script>
		
		<script>
			seajs.use('skin/default/component', function(index){
				index.initCalculate(0, "{$nterm|default='H-'}", "{$cterm|default='-OH'}");
				index.sCheck();
			})
		</script>
	</body>
</html>
